<template>
	<view class="history-container">
		<!-- 商品列表 -->
		<view class="good-list">
			<view class="good-item" v-for="item in historyData" :key="item.id" @click="detailStore.goDetail(item.id)">
				<view class="good-image">
					<image :src="item.img_url" />
				</view>
				<view class="text">
					<view class="title">{{item.title}}</view>
					<view class="other">
						<view class="price">￥{{item.sell_price}}</view>
						<view class="count">{{item.buy}}人购买</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app'
	import {
		getHistory
	} from '../../api/user.api';
	import {
		useDetailStore,
		useLoginStore
	} from '../../stores/store';

	const detailStore = useDetailStore()
	const loginStore = useLoginStore()

	const historyData = ref([])

	onLoad(() => {
		getHistoryData()
	})
	
	onShow(() => {
		if (!loginStore.Token) {
			loginStore.goLogin('history')
			uni.showToast({
				title: '请先登录',
				icon: 'error'
			})
		}
	})

	const getHistoryData = async () => {
		historyData.value = await getHistory()
	}
</script>

<style lang="scss">
	page {}

	.history-container {
		background-color: #f0eded;

		// 商品列表
		.good-list {
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			padding: px2rpx(2);

			.good-item {
				width: px2rpx(170);
				height: px2rpx(265);
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				background-color: #fff;
				border-radius: px2rpx(16);
				margin: px2rpx(6);
				overflow: hidden;

				.good-image {
					width: 100%;
					height: px2rpx(206);


					image {
						width: 100%;
						height: px2rpx(170);
					}
				}

				.text {
					display: flex;
					flex-direction: column;
					padding: px2rpx(2);

					.title {
						height: px2rpx(14);
						width: px2rpx(170);
						font-size: px2rpx(12);
						color: #333;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}

					.other {
						display: flex;
						align-items: center;
						justify-content: space-between;
						height: px2rpx(42);
						width: px2rpx(170);
						padding: px2rpx(4);

						.price {
							font-size: px2rpx(14);
							color: #f50;
						}

						.count {
							font-size: px2rpx(12);
							color: #999;
							margin-right: px2rpx(10);
						}
					}

				}
			}
		}
	}
</style>